<template>

  <div>
    <div id="cinemaNav" style="position:fixed;width:100%;top:0px;z-index:99;background:white">
      <div class="header">
        <van-button round type="info" class="cityButton" size="small" to="/city">
          {{$store.state.cityName}}
          <van-icon name="arrow-down" />
        </van-button>


        <div class="title" style="width:80px;">电影</div>

        <span class=right style="width: 40px;">
          <van-button round type="info" class="cityButton" size="small" to="/cinemasearch">
            <van-icon name="search" size="25px" />
          </van-button>
        </span>

      </div>

      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>


    <ul class="cinemalist" style="margin-top:100px">
      <li v-for="(item, index) in cinemalist" :key="index" @click="goCinemaDetail(item)">
        <div class="info">
          <p class="cinemaname" >
            {{ item.name }}
          </p>
          <p class="address">
            {{ item.address }}
          </p>
        </div>
        <p class="price">
          ￥{{item.lowPrice | price }} 起

        </p>
        <p class="distance">
          {{item.Distance | distance }}
        </p>

      </li>
    </ul>
  </div>
</template>

<script>
  import {
    cinemaListData
  } from "@/api/api.js";

  export default {
    name: "cinema",
    props: [],
    components: {},
    data() {
      return {
        cinemalist: [],
        // 获取城区名称
        districtName:[],
        value1: 0,
        value2: 'a',
        value3: 'A',
        option1: [{
            text: ['全城'],
            value: 0
          },
          {
            text: '全城',
            value: 1
          },
          {
            text: '全城',
            value: 2
          },
        ],
        option2: [{
            text: 'APP订票',
            value: 'a'
          },
          {
            text: 'APP订票',
            value: 'b'
          },
          {
            text: 'APP订票',
            value: 'c'
          },
        ],
        option3: [{
            text: '最近去过',
            value: 'A'
          },
          {
            text: '最近去过',
            value: 'B'
          },
          {
            text: '最近去过',
            value: 'C'
          },
        ],
      };
    },
    //方法 函数写这里
    methods: {
      goCinemaDetail(id){
        this.$router.push('/Cinema?'+id.cinemaId);
        console.log(id.cinemaId);
      }
    },
    //计算属性
    computed: {},
    //侦听器
    watch: {},
    //过滤器
    filters: {
      price(value) {
        return parseFloat(value / 100)
      },
      distance(value) {
        return value.toFixed(2) + 'km'
      }
    },
    //以下是生命周期
    //组件创建之前
    beforeCreate() {},
    //组件创建之后
    created() {
      cinemaListData(this.$store.state.cityId).then((res) => {
        console.log(res);
        this.cinemalist = res.data.data.cinemas;
        console.log("cinemalist", this.cinemalist);
      });
    },
    //页面渲染之前
    beforeMount() {},
    //页面渲染之后
    mounted() {},
    //页面视图数据更新之前
    beforeUpdate() {},
    //页面视图数据更新之后
    updated() {},
    //页面销毁之前
    beforeDestroy() {},
    //页面销毁之后
    destroyed() {},
  };
</script>


<style scoped>
  .cinemalist {
    margin-top: 24px;
  }

  .cinemalist li {
    position: relative;
    background-color: #fff;
    padding: 15px;
  }

  .info {
    width: calc(100% - 65px);
    text-align: left;
    padding-right: 15px;
  }

  p {
    display: block;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinemaname {
    color: #191a1b;
    font-size: 15px;
  }

  .address {
    color: #797d82;
    font-size: 13px;
    margin-top: 5px;
  }


  .price {
    font-size: 15px;
    color: #ff5f16;
    float: right;
    margin-top: -60px;
  }

  .distance {
    font-size: 15px;
    color: gray;
    float: right;
    margin-top: -30px;
  }

  .rmb {
    margin-right: 5px;
  }

  .upon {
    font-size: 10px;
  }

  .postiton {
    font-weight: 400;
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #797d82;
    text-align: center;
  }

  .van-button {
    color: black;
    background-color: white;
    border: 1px solid white;
    font-size: 15px;
    width: 25%;
    padding-top: 5px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    height: 44px;
    line-height: 44px;
  }

  .right .van-button {
    width: 20px;
    height: 20px;
  }
</style>